<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
  .title{
    color:red;
  }
  </style>
</head>
<body>
<div id="root"></div>
<!-- 引⼊react的核⼼库 -->
<script
crossorigin
src="https://unpkg.com/react@18.2/umd/react.development.js"
></script>
<!-- 引⼊react-dom⽤于⽀持react操作dom -->
<script
crossorigin
src="https://unpkg.com/react-dom@18.2/umd/react-dom.development.js"
></script>
<!-- 引⼊babel转换jsx为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">  
//script 中添加 type="text/babel" 就可以使⽤jsx语法了
// 1 创建虚拟dom
// const vdom = React.createElement("div",{id:"xxxd"},"helle zfcraect")
// const  root=ReactDOM.createRoot(document.getElementById("root"))
// root.render(vdom)
//2 创建虚拟dom 使用jsx 
//1创建虚拟Dom
//  const vdom = <h1>hello react</h1>
//  console.log(vdom,"vdom");
//  //2 创建真实Dom
//  const Tom=document.getElementById("root")
//  console.log(Tom,"Tom");
//  debugger
 //3 把虚拟Dom渲染到真实Dom
//  const root = ReactDOM.createRoot(document.getElementById("root"));
//  root.render(vdom)
 // 3-react18 版本之前的写法
//  const vdom = <h1>hello reactxxx</h1>
//  const root = ReactDOM.render(vdom,document.getElementById("root"));

//4 jsx的使用
// const text = "hello reactxxxx"
// //创建虚拟Dom  只有一个根标签 也可以使用《》《/》
// const vdom = (
//     <div>
//   <h1>hello react</h1>
//     <div className="title" style={{fontSize:"25px"}}>我是{text}</div>
//     <a href="#"> 点击</a>
// </div>

// );
// //创建真实Dom
// const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(vdom)
// jsx 语法注意
// 定义虚拟dom 不加入字符串引号  标签中引入的变量或者js表达式要使用{} 
//样式的类名 使用className  内联样式使用style={{key：value}}
// 只用一个根标签 所有的标签必须要闭合
//标签如果是小写的字母则代表使用的html标签 大写则是自定义组件 都没有找到会报错

//5 jsx 动态渲染数据
// jsx 的写法
const personList=["1","2","3","4"]
//创建虚拟dom
const vdoms = (
    <div>
        <h1>hello react{
                personList.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
            }</h1>
            
             </div>
           
)
// 创建容器 将虚拟dom 渲染到页面中
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(vdoms)
//原生js的写法
// const personLists=["1","2","3","4","5"]
// let str=""
// personLists.forEach((item,index)=>{
//     str+=`<li>${item}</li>`
// })
// let ul=document.getElementById("ui")[0]
// ul.innerHTML=str

</script>
</body>
</html>